// 等页面加载完之后再运行，添加load
window.addEventListener('load', function () {
    // 左箭头
    var arrow_l = document.querySelector('.arrow-l');
    // 右边箭头
    var arrow_r = document.querySelector('.arrow-r');
    // 主图大盒子
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;

    // 鼠标经过，箭头显示

    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        
        // timer = null;
    })
    // 鼠标离开，箭头隐藏
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer=setinterval(function () {
            arrow_r.click();
        }, 2000)
    })
    // 获取ul ol
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    // 根据ul的孩子创建ol的孩子li(小圆点);
    for (var i = 0; i < ul.children.length; i++) {
        var li = this.document.createElement('li')
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 点击小圆点的时候，用排他事件，点击哪个哪变色
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 获取的小圆圈的索引是当前li的索引
            var index = this.getAttribute('index')
            // 这时候ul跟着小圆点变，ul使用小圆点的索引
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            num = circle = index;
            animate(ul, -index * focusWidth)
        })

    }
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // 给第一个小圆点类名current；
    ol.children[0].className = 'current';
    // 点击右箭头，图片跟着右箭头变化，
    // 右箭头跟着小圆点变化，把他放在小圆点点击事件的里面，在外面声明一个num，num++
    var num = 0;
    var circle = 0;
    var flag = true;
    // num = circle = index;
    arrow_r.addEventListener('click', function () {
       
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
          
                // 当num走到克隆的那一个图片的时候，坐标回到0
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth,function() {
                flag = true; // 打开节流阀
            });
            // 动画结束之后开始节流阀，让点击有用
          
    
            // 点击右键的时候，小圆点跟着动
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }


    })
    arrow_l.addEventListener('click', function () {
        var flag = true;
        if (flag) {
            flag = false;
            if (num == 0) {
          
                // 当num走到克隆的那一个图片的时候，坐标回到0
                ul.style.left = ul.children.length-1;
                num =  ul.children.length-1;
            }
            num++;
            animate(ul, -num * focusWidth,function() {
                flag = true; // 打开节流阀
            });
            // 动画结束之后开始节流阀，让点击有用
         
    
            // 点击右键的时候，小圆点跟着动
            circle++;
            if (circle <0) {
                circle =  ul.children.length-1;
            }
            circleChange();
        }


    })

    // circleChange()函数
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 这里是小圆点的坐标啊啊啊啊
        ol.children[circle].className = 'current';
    }
    // 每隔2秒钟滚动播放一次
    var timer =  setInterval(function () {
        arrow_r.click();
    }, 2000);





























    // 最后的括号

})